<template>
  <div>
    <div class="header">
      <img src="../../assets/images/fanhui.png" height="23" alt="" @click="back"/>
      <div>个人信息</div>
      <img src="../../assets/images/首页按钮.png" height="23" alt="" />
    </div>
    <div class="top-list">
        <div class="list">
            <div>姓名</div>
            <span>{{data.name}}</span>
        </div>
         <div class="list">
            <div>联系电话</div>
            <span>{{data.phone}}</span>
        </div>
    </div>

    <div class="bottom-list top-list">
        <div class="list">
            <div>性别</div>
            <span>{{data.sex}}</span>
        </div>
        <div class="list">
            <div>年薪</div>
            <span>{{data.year_salary}}</span>
        </div>
        <div class="list">
            <div>月薪</div>
            <span>{{data.month_salary}}</span>
        </div>
        <div class="list">
            <div>个人简介</div>
            <span>{{data.remark}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import {usersInfo} from '../../request/api'
export default {
    created(){
        usersInfo().then(res=>{
            if(res.errCode==0){
                console.log(res.data);
                let {data} =res
                this.data=data
            }
        })
    },
  data() {
    return {
        arr:["性别","年薪","月薪","个人简介"],
        data:[],
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
  },
};
</script>
 
<style lang = "less" scoped>
.bottom-list{
    margin-top: 20px;
}
*{
    padding: 0;margin: 0;
}
.top-list{
    .list{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        height: 45px;
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
        box-sizing: border-box;
        align-items: center;
        span{
            color: #666;
        }
    }
}
.header {
  width: 100vw;
  height: 64px;
  background: #003399;
  display: flex;
  color: #fff;
  font-size: 22px;
  padding: 25px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  img {
    margin-top: 3px;
  }
}
</style>